<template>
  <div>
    <a-row>
      <a-col   class='mb20'>
          <a-input  placeholder="请输入客户名称"  style="width: 300px"  v-model='search.keyWord'/>
          <a-select  style="width: 120px"  v-model='search.supOrBuyer'>
            <a-select-option value="">所有</a-select-option>
            <a-select-option value="1">供应商</a-select-option>
            <a-select-option value="2">买方</a-select-option>
            <a-select-option value="3" >供应商和买方</a-select-option>
            <a-select-option value="4">代理方</a-select-option>
            <a-select-option value="0">待确认</a-select-option>
          </a-select>
          <a-button type="primary"  @click='pageInit()'>搜索</a-button>
      </a-col>
    </a-row>
    <a-row  class='mb20'>
      <a-col :span="6">   
            <router-link  to='/customer/listAdd'> <a-button type="primary" icon="plus-circle">新建</a-button></router-link>
        </a-col>
    </a-row>
    <a-table :columns="columns" :dataSource="data"  :rowKey="record => record.code"  :pagination="pagination"  @change="handleTableChange">
      <span slot="customTitle">客户名称</span>
      <span slot='supOrBuyer'  slot-scope="text, record" >{{text | customType}}</span>
      <span slot='date'  slot-scope="text, record" >{{text | formatDates}}</span>
      <span slot="action" slot-scope="text, record"  > 
        <router-link  :to='{path:"/customer/getInfo",query:{code:record.code}}'  class='color-blue'>客户维护</router-link>
        <a-divider type="vertical" />
        <router-link  :to='{path:"/customer/edit",query:{code:record.code}}'  class='color-blue'>编辑</router-link>
        <a-divider type="vertical" />
        <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
            <a href="javascript:;"  class='color-red'>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
import  { customerList,delEntCustomer }  from  '@/api/customer/index'
export default {
  name: 'customer',
  data () {
    return {
      columns:[{
        dataIndex: 'name',
        key: 'name',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' },
      }, {
        title: '类型',
        scopedSlots: { customRender: 'supOrBuyer' },
        dataIndex: 'supOrBuyer',
      }, {
        title: '联系人',
        dataIndex: 'contact',
      }, {
        title: '联系方式',
        dataIndex: 'phone',
      },{
        title: '录入人',
        dataIndex: 'createUserName',
      },
      {
        title: '创建日期',
        scopedSlots: { customRender: 'date' }, 
        dataIndex: 'createTime',
      },  
       {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
      data:[],
      search:{
          keyWord:'',
          supOrBuyer:'',
          pageSize:10,
          pageNo:1
      },
      pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },  
    }
  },
  created(){
    this.pageInit()
  },
  methods:{
    pageInit(){
      customerList(this.search).then((res)=>{
        this.data = res.data.dataList
        this.pagination.total = res.data.totalRs
      })
    },
    confirmDel(code){
      delEntCustomer(code).then((res)=>{
        this.$message.success(res.data.msg)
        this.pageInit()
      })
    },
    handleTableChange (pagination, filters, sorter) {
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
  },
  computed:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
